<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 350px;
            height: 350px;
            margin: 100px;
            border: 1px solid #ccc;
            position: relative;
        }
        .big {
            width: 400px;
            height: 400px;
            position: absolute;
            top:0;
            left: 360px;
            border: 1px solid #ccc;
            overflow: hidden;
            display: none;
        }
        .mask {
            width: 175px;
            height: 175px;
            background: rgba(255,255,0,0.4);
            position: absolute;
            top:0;
            left: 0;
            cursor: move;
            display: none;
        }
        .small {
            position: relative;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="small">
        <img src="images/001.jpg" >
        <div class="mask"></div>
    </div>
    <div class="big">
        <img src="images/0001.jpg">
    </div>
</div>
<script src="../animate.js"></script>
<script>
    var box = document.getElementsByClassName('box')[0];
    var small = box.firstElementChild || box.firstChild;
    var big = box.children[1];
    var mask = small.children[1];
    var bigImg = big.children[0];

    small.onmouseenter= function () {
        //封装好方法调用：显示元素
        show(mask);
        show(big);
    };
    small.onmouseleave= function () {
        //封装好方法调用：隐藏元素
        hide(mask);
        hide(big);
    };

    small.onmousemove = function (event) {
        event = event || window.event;

        var pagex = event.pageX || scroll().left +event.clientY;
        var pagey = event.pageY || scroll().top + event.clientY;
        //让鼠标在黄盒子最中间，减去黄盒子宽高的一半
        var x = pagex - box.offsetLeft - mask.offsetWidth/2;
        var y = pagey - box.offsetTop - mask.offsetHeight/2;

        //限制换盒子的范围
        //left取值为大于0，小盒子的宽-mask的宽。
        if(x<0){
            x = 0;
        }
        if(x>small.offsetWidth-mask.offsetWidth){
            x = small.offsetWidth-mask.offsetWidth;
        }
        //top同理。
        if(y<0){
            y = 0;
        }
        if(y>small.offsetHeight-mask.offsetHeight){
            y = small.offsetHeight-mask.offsetHeight;
        }
        //移动黄盒子
        mask.style.left = x + 'px';
        mask.style.top = y + 'px';

        //两盒子的比例
        var scale = bigImg.offsetWidth/small.offsetWidth;

        var xx = scale*x;
        var yy = scale*y;

        bigImg.style.marginTop = -yy + 'px';
        bigImg.style.marginLeft = -xx + 'px';

    }
</script>
</body>
</html>